<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>计算属性示例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id='app'>
        <!-- 计算商品总价部分 -->
        单价：<input type="number" v-model="price" /> <br>
        数量：<input type="number" v-model="count" /> <br>
        总价：{{ price * count }}<br>
        总价：{{ getTotal() }} 方法<br>
        总价：{{ total }} 计算属性
        <hr>
        <!-- 输入文本框 -->
        <input v-model="text" type="text">
        <hr>
        <!-- 计算 BMI 及体脂率相关部分 -->
        身高：<input type="number" v-model="height" />m<br>
        体重：<input type="number" v-model="weight" />kg<br>
        年龄：<input type="number" v-model="age" />岁<br>
        性别：
        <select v-model="gender">
            <option value="male">男</option>
            <option value="female">女</option>
        </select><br>
        BMI: {{ bmi }}<br>
        体脂率: {{ bodyFatPercentage }}%<br>
        <hr>
        <!-- 根据 BMI 判断健康状态 -->
        <span v-if="bmi < 18.5">你的 BMI 显示体脂率偏低，不健康</span>
        <span v-else-if="bmi >= 18.5 && bmi <= 23.9">你的 BMI 显示体脂率正常，健康</span>
        <span v-else>你的 BMI 显示体脂率偏高，不健康</span>
        <hr>
        <!-- 根据体脂率判断健康状态 -->
        <span v-if="gender === 'male' && bodyFatPercentage < 10">男性体脂率偏低，不健康</span>
        <span v-else-if="gender === 'male' && bodyFatPercentage >= 10 && bodyFatPercentage <= 20">男性体脂率正常，健康</span>
        <span v-else-if="gender === 'male'">男性体脂率偏高，不健康</span>
        <span v-if="gender === 'female' && bodyFatPercentage < 20">女性体脂率偏低，不健康</span>
        <span v-else-if="gender === 'female' && bodyFatPercentage >= 20 && bodyFatPercentage <= 30">女性体脂率正常，健康</span>
        <span v-else-if="gender === 'female'">女性体脂率偏高，不健康</span>
        <hr>
        正常范围：BMI 18.5~23.9，男性体脂率 10% - 20%，女性体脂率 20% - 30%
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    price: 5,
                    count: 1,
                    text: 'hello vue',
                    height: 1.7,
                    weight: 60,
                    age: 30,
                    gender: 'male'
                };
            },
            computed: {
                // 计算商品总价的计算属性
                total() {
                    console.log('计算属性');
                    return this.price * this.count;
                },
                // 计算 BMI 的计算属性
                bmi() {
                    if (this.height === 0) return 0;
                    return (this.weight / (this.height * this.height)).toFixed(2);
                },
                // 计算体脂率的计算属性
                bodyFatPercentage() {
                    if (this.height === 0) return 0;
                    let bfp;
                    if (this.gender === 'male') {
                        bfp = (1.2 * this.bmi) + (0.23 * this.age) - 16.2;
                    } else {
                        bfp = (1.2 * this.bmi) + (0.23 * this.age) - 5.4;
                    }
                    return bfp.toFixed(2);
                }
            },
            methods: {
                // 计算商品总价的方法
                getTotal() {
                    console.log('方法');
                    return this.price * this.count;
                }
            }
        });
        app.mount('#app');
    </script>
</body>

</html>